<template>
  <Modal
    width="750"
    v-model="config"
    title="选择支付方式"
    footer-hide
    :mask-closable="false"
    @on-cancel="cancel"
  >
    <div class="pay-modal-main">
      <Spin :withIcon="true" v-if="loading"></Spin>
      <slot></slot>
      <div class="flx-row-bw-c" style="margin: 25px 0 40px">
        <div
          class="pay-item box-shadow flx-row-c-c"
          :class="{ active: payWay == 0 }"
          @click="changePayWay(0)"
        >
          <div class="p-i-1"></div>
          <span class="c-d2" style="margin-left: 10px">微信支付</span>
        </div>
        <pay-code-modal type=1 :show.sync="wechatPayModalShow" :codeUrl="wechatPayCode"></pay-code-modal>
        <div
          class="pay-item box-shadow flx-row-c-c"
          :class="{ active: payWay == 1 }"
          style="margin: 0 30px"
          @click="changePayWay(1)"
        >
          <div class="p-i-2"></div>
          <span class="c-d2" style="margin-left: 10px">支付宝支付</span>
        </div>
        <pay-code-modal type=2 :show.sync="zhifubaoPayModalShow" :codeUrl="zhifubaoPayCode"></pay-code-modal>
        <div
          class="pay-item box-shadow flx-col-c-c"
          :class="{ active: payWay == 2 }"
          @click="changePayWay(2)"
        >
          <span class="f-14 c-d2"
            >余额支付（余额￥{{ $store.state.user.balance }}）</span
          >
          <span
            class="c-g"
            v-if="
              parseFloat($store.state.user.balance) < sumPayable ||
              parseFloat($store.state.user.balance) == 0
            "
          >
            余额已不足支付
            <span class="c-b" style="cursor: pointer">充值</span></span
          >
        </div>
      </div>
      <div class="flx-row-c-c">
        <div
          class="big-button-size user-strong-button"
          style="margin-right: 50px"
          @click="pay"
        >
          立即支付
        </div>
        <div class="big-button-size user-normal-button" @click="cancel">
          取消
        </div>
      </div>
    </div>
  </Modal>
</template>

<script>
import {pay} from "@/api/user"
export default {
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    sumPayable: {
      default: 0,
    },
    orderNo: {
      default: ''
    }
  },
  components: {
    payCodeModal: () => import("_c/modal/payCodeModal/payCodeModal.vue")
  },
  watch: {
    show: {
      immediate: true,
      handler(newValue) {
        if(!newValue) {
          if(this.wechatPayModalShow) this.wechatPayModalShow = false
          if(this.zhifubaoPayModalShow) this.zhifubaoPayModalShow = false
        }
      },
    },
  },
  data() {
    return {
      loading: false,
      payWay: 0,

      //弹出框
      wechatPayModalShow: false,
      wechatPayCode: '',
      zhifubaoPayModalShow: false,
      zhifubaoPayCode: ''
    };
  },
  methods: {
    changePayWay(id) {
      if (this.payWay == id) return;
      if (
        id == 2 &&
        (parseFloat(this.$store.state.user.balance) < this.sumPayable ||
          parseFloat(this.$store.state.user.balance) == 0)
      )
        return;
      this.payWay = id;
    },
    cancel() {
      this.config = false;
    },
    async pay() {
      this.loading = true
      let data = {
        outTradeNo: this.orderNo,
        source: 0,
        type: this.payWay
      }
      let res = await pay(data);
      if(res.code == 200) {
        this.$emit('start-pay');
        if(this.payWay == 0) {
          this.wechatPayCode = res.data;
          this.wechatPayModalShow = true;
          this.loading = false
        } else if (this.payWay == 1) {
          this.zhifubaoPayCode = res.data;
          this.zhifubaoPayModalShow = true;
          this.loading = false
        }
      } else {
        this.loading = false
      }
    }
  },
  computed: {
    config: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit("update:show", val);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.pay-modal-main {
  padding: 30px 40px 50px;
}
.pay-item {
  @include size(190px, 72px);
  border: transparent solid 1px;
  transition: border-color 0.3s, background-color 0.3s;
  border-radius: 4px;
  cursor: pointer;
  &:hover {
    border-color: #f9521f;
  }
  &.active {
    background-color: #fedcd2;
    border-color: #f9521f;
    @include bg-setting("select2", 16px 13px, right bottom);
  }
}
.p-i-1 {
  @include size(28px, 25px);
  @include bg-setting("p-i-2");
}
.p-i-2 {
  @include size(25px, 26px);
  @include bg-setting("p-i-1");
}
</style>